<template>
  <div style="display: flex;align-items: center;justify-content: center">
    <search-kind-component v-model="searchKinds"/>
    <el-input v-model="kw" placeholder="请输入查询关键词" style="margin-left: 10px;width: 400px;margin-right: 10px"></el-input>
    <el-button @click="searchPagedDoc">搜索</el-button>
  </div>
  <el-table :data="page.records">
    <el-table-column prop="content.title" label="标题" show-overflow-tooltip/>
    <el-table-column prop="doi" label="编号" show-overflow-tooltip/>
    <el-table-column prop="publication.title" label="出版物" show-overflow-tooltip/>
    <el-table-column prop="publication.category" label="分类" show-overflow-tooltip width="100"/>
    <el-table-column prop="content.keywordsStr" label="关键词" show-overflow-tooltip/>
    <el-table-column prop="authorsName" label="作者" show-overflow-tooltip/>
    <el-table-column fixed="right" label="操作" width="140px">
      <template #default="scope">
        <el-button link type="primary" size="small" @click="showDoc(scope.$index)">查看</el-button>
        <el-button link type="primary" size="small" @click="editDoc(scope.$index)">编辑</el-button>
        <el-button link type="primary" size="small" @click="updateDoc(scope.$index)">刷新</el-button>
      </template>
    </el-table-column>
  </el-table>

  <div style="display:flex;align-items: center;margin-top: 5px">
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 15, 20, 30]"
        :page-size="pageSize"
        :total="page.total"
        layout="total, sizes, prev, pager, next, jumper"
        style="margin-left: 20px"
    ></el-pagination>
  </div>

</template>

<script setup>
import {provide, ref, onMounted, inject} from "vue";
import SearchKindComponent from "@/components/add/document/common/SearchKindComponent.vue";
import {getPageApi, reInitDocById} from "@/apis/document";
import {ElMessage} from "element-plus";

const searchKinds = ref(['标题', 'DOI'])
const sk_index = ref(0)
provide('sk_index', sk_index)

const page = ref({total: 0, records: []})
const currentPage = ref(1)
const pageSize = ref(10)

const kw = ref('')
const searchPagedDoc = () => {
  let x = kw?.value?.trim()
  if (!x) x = ''
  if (sk_index.value === 0 || sk_index.value === 1) {
    getPageApi(currentPage.value, pageSize.value, x ? sk_index.value + 1 : 0, x).then(resp => {
      if (resp.data.code === 200) {
        page.value = resp.data.data
        console.log(page.value)
      } else {
        ElMessage.error(resp.data.msg)
      }
    })
  }
}

onMounted(() => {
  searchPagedDoc()
})


const handleSizeChange = (newSize) => {
  pageSize.value = newSize;
  currentPage.value = 1; // 切换每页大小时，重置当前页码为第一页
  searchPagedDoc()
}
const handleCurrentChange = (newPage) => {
  currentPage.value = newPage;
  searchPagedDoc()
}

const showDoc = (j) => {
  if (0 <= j && j < page.value.records.length) {
    sessionStorage.setItem('showed_doc_id', page.value.records[j].id)
    linkTo(3)
  }
}

const linkTo = inject('linkTo')
const editDoc = (j) => {
  if (0 <= j && j < page.value.records.length) {
    sessionStorage.setItem('edit_doc_doi', page.value.records[j].doi)
    linkTo(2)
  }
}

const updateDoc = (j) => {
  if (0 <= j && j < page.value.records.length) {
    reInitDocById(page.value.records[j].id).then(resp => {
      if (resp.data.code === 200) {
        page.value.records[j] = resp.data.data
      } else {
        ElMessage.error(resp.data.msg)
      }
    })
  }
}

</script>

<style scoped>

</style>